<div class="card">
    <h2>Update</h2>

    <div class="grid">
        <div class="col-12 xl:col-4">
            <div class="card h-full">
                <h5>Current Version: {{(info$ | async)?.version}}</h5>

                <ng-container *ngIf="checkLatestRelease == false; else afterCheck">
                    <h3>Latest Release: <p-button (onClick)="handleReleaseCheck()">Check</p-button></h3>

                    <app-modal [headline]="'Privacy Warning'">
                        <p>
                            Please note, this will connect to <strong>github.com</strong> to check for the latest release.
                        </p>
                        <p class="flex gap-2">
                            <p-checkbox
                                [binary]="true"
                                inputId="ignoreWarning"
                                #ignoreWarning></p-checkbox>
                            <label for="ignoreWarning">Don't show again</label>
                        </p>
                        <div class="flex gap-3 mt-5">
                            <p-button (onClick)="continueReleaseCheck(ignoreWarning.model)">Continue</p-button>
                            <p-button styleClass="p-button-secondary" (onClick)="modalComponent.isVisible = false">Cancel</p-button>
                        </div>
                    </app-modal>
                </ng-container>

                <ng-template #afterCheck>
                    <ng-container *ngIf="latestRelease$ | async as latestRelease">
                        <h3>Latest Release:
                            <a style="text-decoration: underline;" target="_blank"
                            [href]="latestRelease.html_url">{{latestRelease.name}}</a>
                        </h3>

                        <div class="text-orange-500 mb-3">Download both files for update!</div>

                        <div *ngFor="let asset of latestRelease.assets">
                            <div *ngIf="asset.name == 'esp-miner.bin'">
                                <a style="text-decoration: underline;" target="_blank"
                                    [href]="asset.browser_download_url">esp-miner.bin</a>
                            </div>
                            <div *ngIf="asset.name == 'www.bin'">
                                <a style="text-decoration: underline;" target="_blank"
                                    [href]="asset.browser_download_url">www.bin</a>
                            </div>
                        </div>

                        <a class="text-500 underline block mt-3 cursor-pointer" (click)="modalComponent.isVisible = true">
                            Release Notes
                        </a>

                        <app-modal [headline]="latestRelease.name">
                            <div [innerHTML]="simpleMarkdownParser(latestRelease.body)"></div>
                        </app-modal>
                    </ng-container>
                </ng-template>
            </div>
        </div>
        <div class="col-12 lg:col-6 xl:col-4">
            <div class="card h-full">
                <h3>Update AxeOS <span *ngIf="websiteUpdateProgress != null">{{websiteUpdateProgress}}%</span></h3>

                <p-fileUpload #websiteUpload [customUpload]="true" mode="basic" accept=".bin" (uploadHandler)="otaWWWUpdate($event)"
                    [auto]="true" chooseLabel="Browse"></p-fileUpload>

                <small>(www.bin)</small>
            </div>
        </div>
        <div class="col-12 lg:col-6 xl:col-4">
            <div class="card h-full">
                <h3>Update Firmware <span *ngIf="firmwareUpdateProgress != null">{{firmwareUpdateProgress}}%</span></h3>
                <p-fileUpload #firmwareUpload [customUpload]="true" mode="basic" accept=".bin" (uploadHandler)="otaUpdate($event)"
                    [auto]="true" chooseLabel="Browse"></p-fileUpload>

                <small>(esp-miner.bin)</small>
            </div>

        </div>
    </div>
</div>
